<template>
	<view class="page_wrapper">
		<view class="page_sub_title">
			{{mathExam.title}}
		</view>
		<view class="exam_form_block">
			<view class="form_row">
				<view class="row_title">试题数量：</view>
				<view class="row_val_block">
					<input type="number" :value="mathExam.calcTotalCount" class="input_val" disabled="disabled" />
				</view>
			</view>
			<view class="form_row">
				<view class="row_title">答对数量：</view>
				<view class="row_val_block">
					<input type="number" v-model="mathExam.rightCount" class="input_val" @blur="changeRightCount" />
				</view>
			</view>
			<view class="form_row">
				<view class="row_title">答错数量：</view>
				<view class="row_val_block">
					<input type="number" v-model="mathExam.errorCount" class="input_val" @blur="changeErrorCount" />
				</view>
			</view>
			<view class="form_row">
				<view class="row_title">答题用时：</view>
				<view class="row_val_block">
					<picker mode="selector" class="select_time" :range="timeArr" :value="mathExam.useMinutes" @change="minuteChanged">
						<view class="input_val">{{mathExam.useMinutes}}</view>
					</picker>
					<view style="margin-right: 10px;">分</view>
					<picker mode="selector" class="select_time" :range="timeArr" :value="mathExam.useSeconds" @change="secondChanged">
						<view class="input_val">{{mathExam.useSeconds}}</view>
					</picker>
					秒
				</view>
			</view>
			<view class="form_row">
				<view class="row_title">上传答题拍照：</view>
				<view class="row_val_block">
					<block v-if="mathExam.resultImg">
						<image :src="mathExam.resultImg" class="upload_img_btn" @click="uploadImg"></image>
					</block>
					<block v-else>
						<image src="@/static/images/upload_img.png" class="upload_img_btn" @click="uploadImg"></image>
					</block>
				</view>
			</view>
			<view class="form_row">
				<view class="row_title">备注：</view>
				<view class="row_val_block">
					<input type="text" class="input_val" />
				</view>
			</view>
		</view>
		<view class="btns_block">
			<view class="download_btn" @click="saveData()">上传答题结果</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	export default {
		data() {
			return {
				
				examId: 0,
				timeArr: [],
				mathExam: {
					rightCount: '',
					errorCount: '',
					useMinutes: 0,
					useSeconds: 0,
					useTimeTxt: '00:00',
					resultImg: '',
				},
				calcList: []
			}
		},
		onLoad(option) {
			for(let i=0 ; i<60 ; i++) {
				this.timeArr.push(i)
			}
			this.examId = option.examId
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/mathExams/id,' + this.examId, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.mathExam = res
					this.mathExam.useMinutes = parseInt(this.mathExam.useTime / 60 + '') 
					this.mathExam.useSeconds = parseInt(this.mathExam.useTime % 60 + '')
					this.calcList = res.calcLogList
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			
			changeRightCount() {
				if(this.mathExam.rightCount < 0 || this.mathExam.rightCount > this.mathExam.calcTotalCount) {
					this.mathExam.rightCount = 0
					this.mathExam.errorCount = 0
				} else {
					this.mathExam.errorCount = this.mathExam.calcTotalCount - this.mathExam.rightCount
				}
			},
			changeErrorCount() {
				if(this.mathExam.errorCount < 0 || this.mathExam.errorCount > this.mathExam.calcTotalCount) {
					this.mathExam.rightCount = 0
					this.mathExam.errorCount = 0
				} else {
					this.mathExam.rightCount = this.mathExam.calcTotalCount - this.mathExam.errorCount
				}
			},
			minuteChanged(e) {
				this.mathExam.useMinutes = e.detail.value
			},
			secondChanged(e) {
				this.mathExam.useSeconds = e.detail.value
			},
			uploadImg() {
				request.uploadImg().then(res => {
					this.mathExam.resultImg = res
				})
			},
			saveData() {
				if(this.mathExam.rightCount === 0 && this.mathExam.errorCount === 0) {
					uni.showToast({ title: '请填写答对数量', icon: 'none' })
					return false
				}
				if((this.mathExam.useMinutes * 60 + this.mathExam.useSeconds) === 0){
					uni.showToast({ title: '请选择答题用时', icon: 'none' })
					return false
				}
				if(!this.mathExam.resultImg) {
					const $this = this
					uni.showModal({
						title: '提示',
						content: '您还没有上传答题的拍照，确定不上传?',
						success: function (res) {
							if (res.confirm) {
								$this.saveData2Server()
							}
						}
					})
				}else{
					this.saveData2Server()
				}
			},
			saveData2Server() {
				const data = JSON.parse(JSON.stringify(this.mathExam))
				data.selectCalcTypes = undefined
				data.difficultTypes = undefined
				data.useTime = parseInt((this.mathExam.useMinutes * 60) + '' ) + parseInt(this.mathExam.useSeconds + '')
				uni.showLoading()
				request.putJson(
					'/mathExams/id,' + this.examId + '/result', data
				).then(res => {
					uni.hideLoading()
					console.log(res)
					uni.showModal({
						content: '上传完成',
						showCancel: false,
						success: function(res) {
							uni.navigateBack()
						}
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
.page_wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.exam_form_block{
		flex: 1;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		overflow: scroll;
		padding-left: 20px;
		padding-right: 20px;
		.form_row{
			min-height: 60px;
			display: flex;
			align-items: center;
			.row_title{
				width: 120px;
				text-align: right;
			}
			.row_val_block{
				flex: 1;
				display: flex;
				align-items: center;
				.input_val{
					width: 100%;
					text-align: center;
					height: 36px;
					border: 1px solid #c2c2c2;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.upload_img_btn{
					width: 50px;
					height: 50px;
				}
				.select_time{
					width: 60px;
					margin-right: 10px;
				}
			}
			
		}
	}
	.btns_block{
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		.download_btn{
			width: 90%;
			height: 40px;
			color: white;
			background-color: #67C23A;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
	}
}
</style>
